/*
 * @Author: luoqi
 * @Date: 2022-03-28 10:34:16
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 16:01:18
 * @Description: 
 */
import React,{useEffect,useState} from 'react';
import { Card, Row, Col, Statistic} from 'antd';

import * as echarts from 'echarts';

import axios from '../../utils/axios'
const Home = () => {
  let [counts,setCounts]=useState({})
  useEffect(()=>{
    axios({
      url: '/homePageData/getData',
      method: 'get',
      params: {},
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setCounts(res.data)
      }
    })
  },[])
  //按部位分类echarts
  useEffect(()=>{
    
    let option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: counts&&counts.partCount,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  },[counts])
  //按科室分类echarts
  useEffect(()=>{
    let option1 = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: counts&&counts.departmentCount,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var chartDom1 = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom1);
    option1 && myChart1.setOption(option1);
  },[counts])
  return (
    <div>
      <Card title="统计" >
        <Row gutter={16}>
          <Col span={6}>
            <Statistic valueStyle={{ color: '#1890ff' }} title="疾病总数量" value={counts.sicknessCount} />
          </Col>
          <Col span={6}>
            <Statistic valueStyle={{ color: '#3eca69' }} title="疾病知识总数量" value={counts.knowledgeCount}  />
          </Col>
          <Col span={6}>
            <Statistic valueStyle={{ color: '#fcc64a' }} title="疾病视频总数量" value={counts.videoCount} />
          </Col>
          <Col span={6}>
            <Statistic valueStyle={{ color: '#ff4402' }} title="疾病经验总数量" value={counts.experienceCount} />
          </Col>
        </Row>
      </Card>
      <br />
      <Row gutter={50}>
        <Col span={12}>
          <Card title="按部位疾病数量统计" >
          <div id="main" style={{ width: '100%', height: 260 }} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="按科室疾病数量统计" >
          <div id="main1" style={{ width: '100%', height: 260 }} />
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default Home;
